<template>
  <div class="nowSee">
    <div class="btnClass">
      <span class="btnTitle">商品预览</span>
      <el-button v-if="isHide" class="theBtn" @click="setHide">展示</el-button>
      <el-button v-else class="theBtn" @click="setHide">隐藏</el-button>
    </div>
    <div v-if="!isHide" class="goodPhone">
      <div class="goodInfo">
        <el-carousel trigger="click" height="300px" :autoplay="false" arrow="never">
          <el-carousel-item v-for="item in goodData.carousel_img" :key="item">
            <img :src="$globalObj.imgBaseUrl+item" width="100%">
          </el-carousel-item>
        </el-carousel>
        <div class="hint">
          <div class="swiper_bottom">
            <div class="swiper_bottom_left">
              <img src="../assets/images/goodsDetails/mayiLogo.png" width="40px">
            </div>
            <div class="swiper_bottom_right">
              <div style="font-size:16px;color:#fff;margin-bottom:2px">芝麻信用 免除押金</div>
              <div style="font-size:10px;color:#fff">芝麻信用信用600分以上就有机会减免押金</div>
            </div>
          </div>
        </div>
        <div class="goods_info">
          <div class="goods_info_two">
            <div>
              <span class="beforePrice">￥
                <span style="font-size:24px">x.xx</span>/天起</span>
              <span class="afterPrice">￥ xxx.xx/首期</span>
            </div>
            <div class="leftIcon">
              <img src="../assets/images/goodsDetails/parameter.png" height="22px">
              <div class="leftIcon-font">参数</div>
            </div>
          </div>
          <div class="goods_info-title ellipsis2">
            <div v-if="goodData.new_grade" type="success" class="title-icon1 white">
              {{ goodData.new_grade==100 ? '全新' : goodData.new_grade+'新' }}
            </div>
            <!-- <block a:for="{{labelList}}" a:if="{{labelList.length > 0}}">
              <tag class="{{index==0?'title-icon2':'title-icon1'}}" size="sm" type="{{index==0?'success':'danger'}}">{{ item }}</tag>
            </block> -->
            <div class="title-info v-middle">{{ goodData.goods_name }}</div>
          </div>
          <div class="goods-describe ellipsis2">{{ goodData.spread_title }}</div>
          <div class="describe-bottom flex justify-between">
            <div class="deposit-price">xx天起租</div>
            <div>
              <span class="deposit-price">押金最高￥xxxx</span>
              <span class="title-icon1 deposit-icon v-middle">信用免押</span>
            </div>
          </div>
        </div>
        <div class="goods-express white flex justify-between">
          <span class="express">配送方式</span>
          <span class="express-type">{{ goodData.send_out == 1 ? '包邮' : goodData.send_out == 2 ? '到付': '到店自取' }}</span>
        </div>
        <div class="goods-shopinfo white">
          <div class="shopInfo_l">
            <el-avatar
              style="margin-right:10px"
              size="medium"
              :src="phone?$globalObj.imgBaseUrl+phone:''"
            />
            <!-- <img :src="$globalObj.imgBaseUrl+phone" width="30px"> -->
          </div>
          <div class="shopInfo_c text-ellipsis" on-tap="jumpStore">
            <div class="storeName">
              <span>{{ name }}</span>
            </div>
            <span class="storePro">经营项目: 手机租赁</span>
          </div>
          <div class="shopInfo_r" on-tap="jumpStore">
            <img src="../assets/images/goodsDetails/right-icon.png" class="shop_arrowImg">
          </div>
        </div>
        <div class="product-details white">
          <div class="product-detail-top">
            <el-tabs v-model="activeName" :stretch="true" @tab-click="handleClick">
              <el-tab-pane label="商品详情" name="0">
                <div class="tab-content">
                  <!-- <rich-text nodes="{{nodes}}" class="imgs" /> -->
                  <div class="ql-editor" v-html="goodData.goods_content" />
                </div></el-tab-pane>
              <el-tab-pane label="租赁说明" name="1">
                <div class="tab-content">
                  <img src="../assets/images/goodsDetails/zllc1.png" class="zulin_img">
                  <img src="../assets/images/goodsDetails/zllc2.png" class="zulin_img">
                  <img src="../assets/images/goodsDetails/zllc3.png" class="zulin_img">
                  <img src="../assets/images/goodsDetails/zllc4.jpg" class="zulin_img">
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getName, getAccount, getPhoto } from '@/utils/auth'
export default {
  props: ['goodData'],
  data() {
    return {
      isHide: true,
      name: '',
      phone: '',
      activeName: 0
    }
  },
  mounted() {
    this.name = getName()
    this.phone = getPhoto()
  },
  methods: {
    setHide() {
      if (this.isHide) {

      } else {

      }
      this.isHide = !this.isHide
    },
    handleClick(tab, event) {
    //   this.activeName = tab
    }
  }
}
</script>

<style scoped lang="scss">
.nowSee{
    width: 400px;
    height: 94%;
    position: fixed;
    right: 20px;
    top: 60px;
    overflow: scroll;
}
.btnClass{
    background: #333;
    width: 100%;
    height: 60px;
    border: 2px rgb(132, 132, 132) solid;
    border-radius: 5px;
    .btnTitle{
        color: #fff;
        font-weight: 900;
        font-size: 36px;
        line-height: 58px;
        margin-left: 16px;
    }
    .theBtn{
        float: right;
        margin-top: 8px;
        margin-right: 20px;
    }
}
.goodPhone{
    width: 400px;
    height: 780px;
    margin: 20px auto;
    background-image: url('../assets/images/iphoneX-bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    .goodInfo{
        width: 330px;
        height: 620px;
        overflow: scroll;
        margin: 0 auto;
        position: relative;
        top: 47px;
        // background-color: rgb(255, 0, 0);
    }
    .hint{
        height:50px;
        background: linear-gradient(90deg, #0D78FF,#47E9D1);
        padding: 0px 30px 0px 5px;
        box-sizing: border-box;
        position: relative;
        margin-top: 0px;
        .swiper_bottom{
            overflow: hidden
        }
        .swiper_bottom_left {
            float: left;
        }
        .swiper_bottom_left image {
            width: 50px;
            height: 50px;
        }
        .swiper_bottom_right {
            padding: 7px 10px;
        }
    }
    .goods_info{
        padding: 15px 15px 5px 15px;
        background: #FFFFFF;
        .goods_info_two{
            -webkit-box-pack: justify;
            -webkit-justify-content: space-between;
            justify-content: space-between;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            .beforePrice{
                font-size: 12px;
                color: #F72020;
                margin-right: 15px;
            }
            .beforePrice text{
                font-size: 25px;
                font-weight: bold;
                color: #F72020;
            }
            .afterPrice{
                font-size: 12px;
                color: #999999;
            }
            .leftIcon image{
                width: 17px;
                height: 17px;
            }
            .leftIcon-font{
                font-size: 10px;
                color: #666
            }
            .goods_info-title{
                margin-top: 5px;
            }
        }
    }
}
.ellipsis2 {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.title-icon1, .title-icon2{
    height: 16px;
    border-radius: 1px;
    font-size: 10px;
    padding: 0 5px;
}
.title-icon1{
    border: 1px solid #50CC94;
    color: #50CC94;
    margin-right: 5px;
    margin-top:5px;
    background: rgba(233,246,239,1);
}
.title-info{
    font-size: 16px;
    line-height: 25px;
}
.goods-describe{
  font-size: 12px;
  color: #999999;
  line-height: 17px;
  margin-top: 5px;
}
.describe-bottom{
  line-height: 25px;
}
.deposit-price{
  font-size: 12px;
  color: #999999;
}
.deposit-icon{
  margin-left: 5px;
}
.justify-between {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
.goods-coupons, .goods-express{
  margin-top: 10px;
  height: 50px;
  line-height: 50px;
  font-size: 16px;
  padding: 0 15px;
  /* box-shadow: 0px 1px 0px 0px #EEE; */
}
.get-coupons{
  font-size: 12px;
  color: rgb(182, 45, 83);
}
.goods-express{
  margin-top: 1px;
}
.white:not([data-p]) {
    background: #FFFFFF;
}
.goods-shopinfo{
  margin: 10px 0;
  height: 50px;
  padding: 8px 15px 0 15px;
}
.shopInfo_l{
  float: left;
  width: 40px;
  margin-right: 15px;
}
.shopInfo_l image{
  width: 40px;
  height: 40px;
  background: powderblue;
}
.shopInfo_c{
  float: left;
//   height:0.8rem;
  width:70%;
  font-size:14px;
  overflow: hidden;
}
.storeName{
  line-height: 20px;
}
.storePro{
  font-size: 10px;
  color:#999;
  white-space: nowrap;
}
.shopInfo_r{
  float: right;
  width: 25px;
  height: 40px;
  line-height: 40px;
  text-align:center;
}
.shop_arrowImg{
  width: 7px;
  height: 12px;
  vertical-align: middle;
  margin-left: 2px;
}
.zulin_img {
  width: 100%;
  height: 100%;
}
.ql-editor{
    /deep/img{
        width: 100% !important;;
    }
}
/deep/.el-tabs__header{
    background-color: #FFFFFF;
    position: sticky;
    top:0;
    z-index: 999;
}
</style>
